<template>
    <div>
        <ul>
            <li v-for="msg in messageList" :key="msg.id">
                <!-- 跳转路由并携带params参数，字符串的写法 -->
                <!-- <router-link to="/home/message/detail/666/你好呀">{{ msg.title }}</router-link> -->
                <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">{{ msg.title }}</router-link>

                <!-- 跳转路由并携带params参数：对象写法 -->
                    <router-link :to="{
                        // 若是使用params携带参数，必须使用路由的命名，不能使用path
                        name:'myDetail',
                        params:{
                            id:msg.id,
                            title:msg.title
                        }
                    }">
                    {{ msg.title }}
                    </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
import { name } from 'pubsub-js';

    export default {
        name:'Message',
        data(){
            return {
                messageList:[
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'},
                ]
            }
        }
    }
</script>